<template>
  <div class="box">
    <div class="input_area">
      <el-input
        placeholder="请输入设备名称"
        size="mini"
        :id="search_id"
        v-model="input"
        class="input_item"
      />
      <img src="../../assets/input.png" alt="" class="img_logo" />
      <span class="el-icon-search search" @click="searchMap"></span>
    </div>
    <div class="select_area">
      <el-cascader
        :options="options"
        size="mini"
        placeholder="选择地域查询"
        :show-all-levels="false"
        :props="cityProps"
        clearable
        v-model="cityVal"
        @change="selectCity"
      ></el-cascader>
    </div>
  </div>
</template>
<script>
import cityRegionData from "../../assets/area";
import cityJson from "./region.json";
export default {
  name: "search",
  components: {},
  mixins: [],
  props: {},
  data() {
    return {
      search_id: "searchId",
      input: "",
      options: cityRegionData,
      cityProps: {
        children: "children",
        label: "business_name",
        value: "business_name",
        checkStrictly: true,
      },
      cityVal: "",
    };
  },
  computed: {},
  watch: {},
  mounted() {},
  methods: {
    searchMap() {
      if (!this.input) {
        this.$emit("input_val", []);
        return;
      }
      let val = cityJson.find((item) => item.equipName === this.input);
      if (val) {
        this.$emit("input_val", val.latlng);
        return;
      }
      this.$message.warning("未查询到该设备,请输入正确的设备名称");
    },
    selectCity() {
      if (!this.cityVal) {
        this.$emit("select_val", []);
        return;
      }
      console.log(this.cityVal);
      if (this.cityVal.length === 3) {
        let val = cityJson.find((item) => item.cityName === this.cityVal[2]);
        this.$emit("select_val", val.latlng);
        return;
      }

      this.$message.warning("未查询到该设备,请输入正确的设备名称");
    },
  },
};
</script>
<style lang="less" scoped>
.box {
  display: flex;

  .input_area {
    position: relative;
    width: 180px;
    height: 50px;
    display: flex;
    align-items: center;

    .input_item {
      width: 100%;

      /deep/ .el-input__inner {
        padding-left: 30px !important;
      }
    }

    .img_logo {
      position: absolute;
      left: 5px;
      top: 50%;
      transform: translateY(-50%);
      width: 20px;
      height: 20px;
      margin-right: 10px;
    }

    span {
      position: absolute;
      right: 10px;
      top: 50%;
      transform: translateY(-50%);
      font-size: 16px;
      color: #ccc;
      cursor: pointer;
    }
  }

  .select_area {
    width: 180px;
    display: flex;
    align-items: center;
    height: 50px;
    margin-left: 20px;
  }

  .date_area {
    width: 150px;
    display: flex;
    align-items: center;
    height: 50px;
    margin-left: 10px;
  }
}
</style>
